<template>
  <div>
    <!-- <el-card shadow="never" class="aui-card--fill"> -->
    <!-- <el-collapse-transition> -->
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <!--文本框-->
      <el-form-item>
        <el-select v-model="dataForm.formType" placeholder="表单类型" clearable>
          <el-option v-for="t in this.$getDictList('BPM_FORM_TYPE', false)" :key="t.val" :label="t.label" :value="t.val"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.processName" :placeholder="$t('approveManage.processName')" clearable>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.applyerName" :placeholder="$t('approveManage.applyer')" clearable>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="dataForm.bDate" type="date" :placeholder="$t('beginDate')" value-format="yyyy-MM-dd" style="width: 160px">
        </el-date-picker>
        -
        <el-date-picker v-model="dataForm.eDate" type="date" :placeholder="$t('endDate')" value-format="yyyy-MM-dd" style="width: 160px">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getDataList()">{{ $t('query') }}</el-button>
        <el-button @click="searchReset()">{{ $t('reset') }}</el-button>
      </el-form-item>
    </el-form>
    <!-- </el-collapse-transition> -->
    <div class="aui-card-list-body-table">
      <vxe-table :loading="dataListLoading" :data="dataList" ref="xTable" auto-resize class="vxe-table-element" remote-sort @sort-change="dataListSortChangeHandle" style="margin-top: 10px;" max-height="auto">
        <vxe-table-column type="index" width="50" align="center"></vxe-table-column>
        <vxe-table-column field="formName" title="approveManage.formName" width="180"></vxe-table-column>
        <vxe-table-column field="name" title="approveManage.name" width="100"></vxe-table-column>
        <vxe-table-column field="applyer" title="approveManage.applyer" width="140">
          <template slot-scope="scope">
            {{ scope.row.applyerName }}({{ scope.row.applyer }})
          </template>
        </vxe-table-column>
        <vxe-table-column field="deleteReason" title="approveManage.deleteReason" width="100"></vxe-table-column>
        <vxe-table-column field="comment" title="approveManage.comment"></vxe-table-column>
        <vxe-table-column field="duration" title="approveManage.duration" width="80">
          <template slot-scope="scope">
            {{ millsToTime(scope.row.duration) }}
          </template>
        </vxe-table-column>
        <vxe-table-column field="createTime" title="approveManage.createTime" width="140" align="center">
        </vxe-table-column>
        <vxe-table-column field="remark" title="approveManage.remark"></vxe-table-column>

        <vxe-table-column title="handle" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="viewHistoricDetailHandle(scope.row.procBizId,scope.row.procInstId,scope.row.formId,scope.row.bizId)" icon="el-icon-printer">审批历史
            </el-button>
            <el-button type="text" v-if="scope.row.recall" size="small" @click="recallHandle(scope.row.id)" icon="el-icon-bottom-left">撤回审批
            </el-button>
          </template>
        </vxe-table-column>
      </vxe-table>
      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </div>
    <!-- </el-card> -->
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import processHistory from './process-history'
import moment from 'moment'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/flowable/task/doneList',
        getDataListIsPage: true,
        activatedIsNeed: false
      },
      CODE_DICT_FORMTYPE: 'BPM_FORM_TYPE',
      dataForm: {
        processName: '',
        formType: '',
        applyer: '',
        applyerName: '',
        eDate: '',
        bDate: this.lastWeekDays()
      },
      tableHeightHold: 42,
      todoManageWanderVisible: false
    }
  },
  created () {
    // this.getDataList()
  },
  methods: {
    millsToTime (mills) {
      return processHistory.methods.millsToTime(mills)
    },
    monthFirstDate () {
      return moment().subtract('month', 0).format('YYYY-MM') + '-01'
    },
    viewHistoricDetailHandle (procBizId, procInstId, formId, bizId) {
      this.$nextTick(() => {
        var router = {
          name: 'process-history',
          id: procInstId,
          menuId: this.$route.meta.menuId,
          oldName: 'flowable-bpmProcBiz',
          path: 'flowable/process-history',
          title: '流程进度详情'
        }

        var params = {
          procBizId: procBizId,
          procInstId: procInstId,
          formId: formId,
          bizId: bizId,
          formFlag: true
        }
        this.$options.methods.openNewTab(this.$router, router, params)
      })
    },
    lastWeekDays () {
      let weekOfday = parseInt(moment().format('d')) // 计算今天是这周第几天  周日为一周中的第一天
      return moment().subtract(weekOfday - 1, 'days').format('YYYY-MM-DD')
    },
    // 撤回申请
    recallHandle (id) {
      this.$nextTick(() => {
        this.$confirm(this.$t('prompt.info', { 'handle': '撤回' }), this.$t('prompt.title'), {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }).then(() => {
          this.$http.get(`/flowable/task/nodeCancel/${id}`).then(({ data: res }) => {
            if (res.code !== 0) {
              return
            }
            this.$message({
              message: this.$t('prompt.success'),
              type: 'success',
              duration: 500,
              onClose: () => {
                if (this.mixinViewModuleOptions.treeType) {
                  this.getTreeDataList()
                } else {
                  this.getDataList()
                }
              }
            })
          }).catch(() => { })
        }).catch(() => { })
      })
    }
  },
  components: {}
}
</script>

<style>
.approve-manage .el-card__body {
  padding: 20px 10px 0px 20px;
}
</style>
